<!DOCTYPE html>
<html lang="en">
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width initial-scale=1'>

<link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext'
      rel='stylesheet' type='text/css'/>

<style type='text/css'>
    .ul-list {
        margin-left: 0;
        list-style-type: none;
        text-align: center;
    }

    .ul-list li {
        display: inline-block;
        margin: 10px;
    }

    .ul-list li span {
        height: 96px;
        width: 96px;
        text-align: center;
        display: block;
        color: #fff;
        background: #eaeaea url("./dice.png") no-repeat;
    }

    .ul-list li span.p1 {
        background-position-x: -498px;
        background-position-y: 0;
    }

    .ul-list li span.p2 {
        background-position-x: -198px;
        background-position-y: 0;
    }

    .ul-list li span.p3 {
        background-position-x: -99px;
        background-position-y: 0;
    }

    .ul-list li span.p4 {
        background-position-x: -298px;
        background-position-y: 0;
    }

    .ul-list li span.p5 {
        background-position-x: 0;
        background-position-y: 0;
    }

    .ul-list li span.p6 {
        background-position-x: -199px;
        background-position-y: -102px;
    }

    .ul-list li span.p7 {
        background-position-x: -99px;
        background-position-y: -102px;
    }

    .ul-list li span.p8 {
        background-position-x: -398px;
        background-position-y: 0;
    }

    .ul-list li span.p9 {
        background-position-x: 0;
        background-position-y: -102px;
    }

    @keyframes rotate {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }

    @media (max-width: 640px) {
        .statistics-box {
            display: none;
        }
    }

    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFFFFF;
        border: 1px solid #DCDFE6;
        border-color: #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 400;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        width: 150px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul class="ul-list" id="ul-list">
        <li><span class="dice-item  p2"></span></li>
        <li><span class="dice-item  p6"></span></li>
        <li><span class="dice-item  p2"></span></li>
        <li><span class="dice-item  p6"></span></li>
        <li><span class="dice-item  p5"></span></li>
        <li><span class="dice-item  p5"></span></li>
    </ul>
</div>

<div style="display: flex; justify-content: center ">
    <button onclick="addList()" class="el-button">开始摇</button>
</div>
</body>
<script>

    // 封装函数，便于通过id获取元素
    function $(id) {
        return document.getElementById(id);
    }

    // 生成随机数
    function rand(min, max) {
        if (min > max) {
            var mid = min;
            min = max;
            max = mid;
        }
        //65<=Math.random()*26+65<26+65
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    var arr = [1, 2, 3, 4, 5];

    function addList() {

        $("ul-list").innerHTML = "";
        var node = "";
        for (i of arr) {
            var num = rand(1, 6);
            node += `<li><span class="dice-item  p${num}"></span></li>`;
        }
        $("ul-list").innerHTML = node;
    }

</script>
</html>
